<template>
  <div>
    <el-card v-if="show == 'table'">
      <el-row :gutter="4">
        <el-form :inline="true" label-position="left" label-width="100px">
          <el-form-item>
            <el-input
              v-model="searchDto.name"
              placeholder="请输入关键字"
              style="width:250px"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="searchDto.type" placeholder="请选择残疾类别">
              <el-option
                v-for="item in getDictionary('DIS_TYPE')"
                :key="item.keyword"
                :label="item.label"
                :value="item.keyword"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="searchDto.level" placeholder="请选择残疾等级">
              <el-option
                v-for="item in getDictionary('DIS_LEVEL')"
                :key="item.keyword"
                :label="item.label"
                :value="item.keyword"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="date"
              type="daterange"
              range-separator="至"
              start-placeholder="办证开始日期"
              end-placeholder="办证结束日期"
              format="yyyy年MM月dd日"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-select v-model="searchDto.status" placeholder="请选择执证状态">
              <el-option
                v-for="(item,index) in statusMap"
                :key="index"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="search">
              查询
            </el-button>
            <el-button icon="el-icon-s-open" type="primary" @click="clear">
              重置
            </el-button>
          </el-form-item>

        </el-form>
      </el-row>
      <page-table
        ref="multipleSelection"
        :page-data="pageData"
        :loading="loading"
        :do-get-page-data="getPageData"
      >
        <el-table-column
          prop="id"
          label="编号"
          align="center"
          width="80px"
        ></el-table-column>
        <el-table-column prop="name" label="姓名" align="center">
        </el-table-column>
        <el-table-column prop="sex" label="性别" align="center" width="50px">
        </el-table-column>
        <el-table-column prop="birth" label="出生年月" align="center">
        </el-table-column>
        <el-table-column label="所在地" align="center" width="200px">
          <template slot-scope="scope">{{ getSite(scope.row)}}</template>
        </el-table-column>
        <el-table-column
          prop="nativePlace"
          label="籍贯"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="idCard"
          label="身份证号"
          align="center"
          width="200"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="disabledCard"
          label="残疾证号"
          align="center"
          width="200"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="残疾类别" align="center">
          <template slot-scope="scope">
            {{
            scope.row.disabledType | setType(getDictionary("DIS_TYPE"))
            }}
          </template
          >
        </el-table-column>
        <el-table-column label="残疾等级" align="center">
          <template slot-scope="scope">
            {{ scope.row.disabledLevel | keyText("DIS_LEVEL") }}
          </template>
        </el-table-column>
        <el-table-column label="持证状态" align="center">
          <template slot-scope="scope">
            <sz-badge
              v-if="scope.row.disabledCardStatus"
              :value="scope.row.disabledCardStatus"
              :type="statusStyle(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="管理" align="center" fixed="right">
          <template slot-scope="scope">
            <el-tooltip content="详情" placement="top">
              <el-button
                type="button"
                size="mini"
                icon="el-icon-search"
                @click="view(scope.row)"
              >
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </page-table>
    </el-card>
    <infos v-if="show == 'info'" :disInfo="disInfo" />
  </div>
</template>
<script>
import infos from "./manageInfo.vue";

export default {
  name: "info",
  components: {
    infos
  },
  created() {
    this.getPageData();
  },
  data() {
    return {
      statusMap: [
        { label: '持证', value: 'success' },
        { label: '过期', value: 'warning' },
        { label: '注销', value: 'danger' }
      ],
      date: [],
      pageData: {},
      loading: false,
      searchDto: {
        name: "",
        type: "",
        level: ""
      },
      show: "table",
      disInfo: {},
    };
  },
  filters: {
    setType(val, ts) {
      ts.map(i => {
        if (val.indexOf(i.keyword) > -1) {
          val = val.replace(i.keyword, i.label);
        }
      });
      return val;
    }
  },
  methods: {
    statusStyle(row) {
      const current = this.statusMap.find(({ label }) => label === row.disabledCardStatus)
      return current.value
    },
    view({ id }) {
      this.API.getDisabledPersonById({ id }).then(async ret => {
        this.disInfo = await ret.data;
        this.show = "info";
      });
    },
    getSite({ provinceName, cityName, districtName, streetName, committeeName }) {
      return (provinceName || '') + '/' + (cityName || '') + '/' + (districtName || '') + '/' + (streetName || '') + '/' + (committeeName || '')
    },
    // 获取分页数据
    getPageData(val) {
      let tem = Object.assign(this.searchDto, val);
      tem.startTime = this.date[0];
      tem.endTime = this.date[1];
      this.API.getPersonPageListByArea(tem).then(ret => {
        this.pageData = ret.data;
      });
    },

    // 查询
    search() {
      this.getPageData({ pageIndex: 1 });
    },
    //清空
    clear() {
      this.searchDto = {
        name: "",
        type: "",
        level: ""
      };
      this.date = [];
      this.getPageData();
    }
  }
};
</script>
<style scoped></style>
